<template>
  <view id="search">
    <view class="searchhead">
      <!-- 头部 -->
      <view class="header" :style="headerStyle">
        <view :style="'height: ' + statusBarHeight"> </view>
        <view class="header-info">
          <view class="title" :style="headerTextStyle">
            <view class="navleft">
              <image src="../../static/indexmore/in-back.png" @click="toindex()" mode="" class="navleft-img"></image>
              <view class="navposition" :style="headerdingwei" @tap="get_Location()">
                {{CityName}}
              </view>
              <image src="../../static/index/gpsBlack.png" mode="" class="navleft-img"></image>
            </view>
            <view class="navcent">
              <u-search shape="round" height="25" bg-color="#FAFAFA" :show-action="false"></u-search>
            </view>
            <view class="navright" @click="topseaFun()">
              搜索
              <!-- <image src="../../static/index/bank.png" mode="" class="navright-imgone"></image>
              <image src="../../static/index/plus.png" mode="" class="navright-imgtwo"></image> -->
            </view>
          </view>
        </view>
      </view>
      <!-- 头部 -->
    </view>
    <!-- 热门推荐 -->
    <view class="recommend">
      <view class="recommend-top">
        热门推荐
      </view>
      <view class="recommend-con">
        <view class="recommend-flex">
          <view class="pink">
            个人养老金
          </view>
          <view class="recommend-flex-for" v-for="(item,index) in recommendList" :key="index">

            <view class="text">
              {{item.Text}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 热门推荐 -->
    <!-- 热搜榜 -->
    <view class="Hotsearch"
      style="background-image: linear-gradient(to botton, rgb(25, 241, 248), rgb(255, 255, 255));">
      <!-- 卡片轮播图 -->
      <view>
        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
          <view id="demo1" class="scroll-view-item_H uni-bg-red">
            <!-- 热搜榜 -->
            <view class="Hotsearch-con">
              <view class="Hotsearch-con-top">
                热搜榜
              </view>
              <view class="Hotsearch-con-bottom">
                <view class="Hotsearch-flex">
                  <view class="Hotsearch-for" v-for="(item,i) in hotList" :key="i">
                    <view class="number">
                      <image :src="item.img1" class="numberimg"></image>
                    </view>
                    <view class="text">
                      {{item.text}}
                    </view>
                    <image :src="item.img2" class="numberimg"></image>
                  </view>
                </view>
              </view>
            </view>
            <!-- 热搜榜 -->
          </view>
          <view id="demo2" class="scroll-view-item_H uni-bg-green">
            <!-- 热搜榜 -->
            <view class="Hotsearch-con">
              <view class="Hotsearch-con-top">
                产品榜
              </view>
              <view class="Hotsearch-con-bottom">
                <view class="Hotsearch-flex">
                  <view class="Hotsearch-for" v-for="(item,i) in produceLIst" :key="i">
                    <view class="number">
                      <image :src="item.img1" class="numberimg"></image>
                    </view>
                    <view class="text">
                      <view class="text-top">
                        <view class="text-con">
                          {{item.text}}
                        </view>
                        <view>
                          <image :src="item.img2" class="numberimg"></image>
                        </view>
                      </view>
                      <view class="text-bom">
                        {{item.text1}}
                      </view>
                    </view>
                    <view class="right">
                      <view class="right-top">
                        {{item.text2}}
                      </view>
                      <view class="text-bom">
                        {{item.text3}}
                      </view>
                    </view>
                    <!-- <image :src="item.img2" class="numberimg"></image> -->
                  </view>
                </view>
              </view>
            </view>
            <!-- 热搜榜 -->
          </view>
          <!-- <view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view> -->
        </scroll-view>
      </view>
      <!-- 卡片轮播图 -->
    </view>
    <!-- 热搜榜 -->
  </view>
</template>

<script>
  import QQMapWX from '@/common/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js';
  export default {
    data() {
      return {
        CityName: '泰安市',
        scrollTop: 0,
        old: {
          scrollTop: 0
        },
        // 头
        appData: {},
        headerData: {
          bgColor: "",
          textColor: "",
          dingwei: "",
        },
        // 头
        recommendList: [{
            Text: '惠省钱'
          },
          {
            Text: '手机号收款'
          }, {
            Text: '快贷'
          }, {
            Text: '投资理财'
          }, {
            Text: '龙支付'
          }, {
            Text: '转账'
          }, {
            Text: '贷款'
          }, {
            Text: '信用卡申请'
          }, {
            Text: '信用卡服务'
          }
        ],
        hotList: [{
            img1: "/static/search/search1.jpg",
            text: "个人养老金",
            img2: "/static/search/searchr.jpg"
          },
          {
            img1: "/static/search/search2.jpg",
            text: "惠省钱",
            img2: "/static/search/searchxin.jpg"
          }, {
            img1: "/static/search/search3.jpg",
            text: "快贷",
            img2: "/static/search/searchr.jpg"
          }, {
            img1: "/static/search/search4.jpg",
            text: "手机号收款",
            img2: "/static/search/searchr.jpg"
          }, {
            img1: "/static/search/search5.jpg",
            text: "额度查询",
            img2: ""
          },
          {
            img1: "",
            text: "",
            img2: ""
          },
        ],
        produceLIst: [{
            img1: "/static/search/search1.jpg",
            text: "建信安鑫七天",
            img2: "/static/search/searchr.jpg",
            text1: "代销理财产品",
            text2: "1.84%",
            text3: '近1年年化收益率'
          },
          {
            img1: "/static/search/search2.jpg",
            text: "建信睿鑫最...",
            img2: "/static/search/searchr.jpg",
            text1: "代销理财产品",
            text2: "2.93%",
            text3: '成立以来年化收益率'
          }, {
            img1: "/static/search/search3.jpg",
            text: "建信睿鑫ESG...",
            img2: "/static/search/searchr.jpg",
            text1: "代销理财产品",
            text2: "3.21%",
            text3: '成立以来年化收益率'
          }, {

            img1: "/static/search/search4.jpg",
            text: "建信现金添利热",
            img2: "/static/search/searchr.jpg",
            text1: "货币市场基金",
            text2: "2.10%",
            text3: '七日年化收益率'
          }, {
            img1: "/static/search/search5.jpg",
            text: "建信现金添利热",
            img2: "/static/search/searchr.jpg",
            text1: "货币市场基金",
            text2: "2.10%",
            text3: '七日年化收益率'
          }, {
            img1: "/static/search/search6.jpg",
            text: "手机号收款",
            img2: "/static/search/searchr.jpg",
            text1: "代销理财产品",
            text2: "3.21%",
            text3: '成立以来年化收益率'
          },
        ]

      };
    },
    // 获取定位方法
    getLocationInfo() {
      let _this = this;
      uni.getLocation({
        type: 'gcj02',
        success(res) {
          let lat = res.latitude;
          let lng = res.longitude;
          let key =
            'M7XBZ-2TBKJ-TPBFS-KV3RM-F5QQF-OFFNV'; //申请地址：https://lbs.qq.com/dev/console/application/mine
          uni.request({
            url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + lat + ',' + lng +
              '&key=' + key,
            method: "GET",
            success(ress) {
              let data = ress.data;
              let CityName = ress.data.result.address_component.city;
              _this.CityName = CityName
              uni.setStorage({
                key: 'City_Name',
                data: CityName
              });
            },
            fail() {
              uni.showToast({
                'title': '对不起，数据获取失败！',
                'icon': 'none'
              })
            }
          })
        },
        fail(res) {
          uni.showToast({
            'title': '对不起，获取位置失败！',
            'icon': 'none'
          })
        }
      })
    },

    computed: {
      navigationBarHeight() {
        return (this.appData.statusBarHeight * 2 + 88) + 'rpx'
      },
      statusBarHeight() {
        return (this.appData.statusBarHeight * 2 + 4) + 'rpx'
      },
      headerStyle() {
        return `height:${(this.appData.statusBarHeight * 2 + 88) + 'rpx'};background:${this.headerData.bgColor}`
      },
      headerTextStyle() {
        return `color:${this.headerData.textColor}`
      },
      headerdingwei() {
        return `color:${this.headerData.dingwei}`
      },
    },

    onShow() {
      const res = uni.getSystemInfoSync()
      this.appData = res;
    },

    onLoad() {
      let _this = this;
      uni.$on('getCityName', function(res) {
        _this.CityName = res
      });
    },
    methods: {
      toindex() {
        uni.navigateBack({
          delta: 1
        })
      },
      topseaFun() {
        uni.navigateTo({
          url: '/pages/index/searchFunction'
        })
      },
      scroll: function(e) {
        // console.log(e)
        this.old.scrollTop = e.detail.scrollTop
      },

      onPageScroll(e) {
        if (e.scrollTop >= this.appData.statusBarHeight) {
          this.headerData.bgColor = '#fff'
          this.headerData.textColor = '#000'
          this.headerData.dingwei = '#000'
        } else {
          this.headerData.bgColor = ''
          this.headerData.textColor = ''
          this.headerData.dingwei = ''
        }
      },
      get_Location() {
        uni.navigateTo({
          url: '/pages/Location/Location'
        })
      },
    }
  }
</script>

<style lang="scss">
  .searchhead {
    // height: 88rpx;
    // border: 2rpx solid #000;
  }

  // 头部
  .header {
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    top: 0;
    transition: all .5s;
    background: rgba(255, 255, 255, 0);

    .header-info {
      height: 88rpx;
      margin-top: 30rpx;

      .title {
        display: flex;
        width: 100vw;
        padding: 0 15rpx;
        box-sizing: border-box;
        text-align: center;
        color: #fff;
        transition: all .5s;

        .navleft {
          display: flex;
          width: 25vw;
          height: 50rpx;

          .navleft-img {
            padding: 10rpx 0;
            width: 20rpx;
            height: 30rpx;
          }

          .navposition {
            color: #000;
            font-weight: 520;
            font-size: 35rpx;
            padding-left: 8rpx;
            border: none;
            margin-right: 10rpx;
          }
        }

        .navcent {
          width: 50vw;
          height: 50rpx;
        }

        .navright {
          display: flex;
          justify-content: space-around;
          width: 20vw;
          height: 50rpx;
          color: #5381EE;
        }
      }

    }
  }


  // 头部

  // <!-- 热门推荐 -->
  .recommend {
    width: 90vw;
    margin: 30rpx auto;

    .recommend-top {
      margin-top: 130rpx;
      font-size: 35rpx;
      font-weight: bold;
      margin-bottom: 15rpx;
    }

    .recommend-con {
      .recommend-flex {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;

        .recommend-flex-for {
          // border: 1px solid #000;
        }

        .pink {
          padding: 8rpx 15rpx;
          border-radius: 24rpx;
          margin-right: 20rpx;
          // border: 1px solid #000;
          background-image: url('../../static/search/searchbg.png');
          background-repeat: no-repeat;

        }

        .text {
          padding: 8rpx 15rpx;
          background-color: #eee;
          border-radius: 24rpx;
          margin-right: 20rpx;
          margin-bottom: 20rpx;
        }
      }
    }
  }

  // <!-- 热门推荐 -->
  // <!-- 热搜榜 -->
  .Hotsearch {
    width: 90vw;
    margin: auto;
    border-radius: 10rpx;
  }

  .scroll-view_H {
    // border: 1px solid #000;
    white-space: nowrap;
    width: 100%;
  }

  .scroll-view-item_H {
    display: inline-block;
    width: 80%;
    // text-align: center;
    font-size: 36rpx;
  }

  .uni-bg-red {
    width: 70%;
    border-radius: 20rpx;
    // border: 1px solid #000;
    margin-right: 20rpx;
  }

  .uni-bg-green {
    width: 70%;
    border-radius: 20rpx;
    // border: 1px solid #000;
    // margin-right: 20rpx;
  }

  .Hotsearch-con {
    .Hotsearch-con-top {
      color: #4C7BF5;
      font-weight: bold;
      margin: 30rpx 0;
    }

    .Hotsearch-con-bottom {
      .Hotsearch-flex {
        .Hotsearch-for {
          // border: 1px solid #000;
          // border: 1px solid #000;
          display: flex;
          align-items: center;
        }

        .number {
          // width: 10%;
          margin: 20rpx;
          // padding-bottom: 5rpx;
        }

        .numberimg {
          width: 3vw;
          height: 2vh;
          vertical-align: middle;
          // margin-bottom: 3rpx;
        }

        .text {
          margin-right: 20rpx;
          // line-height: 3vh;
          font-size: 28rpx;
          width: 45%;
          // border: 1px solid #000;

          .text-top {
            // border: 1px solid #000;
            display: flex;
            margin-right: 20rpx;
            // line-height: 3vh;
            font-size: 27rpx;
          }


        }

        .text-bom {
          margin-top: 10rpx;
          font-size: 20rpx;
          color: #ccc;
        }

        .right {
          width: 35%;
          // border: 1px solid #f00;
        }

        .right-top {
          color: #f00;
          font-size: 28rpx;
        }

      }
    }

  }

  // <!-- 热搜榜 -->
</style>